<template>
	<view class="uni-searchbar" :style="{'z-index':zindex}">
		<view :style="{borderRadius:radius+'px',backgroundColor: bgColor,'border-style':isShow?'none;':'solid;','margin-top':isShow?'10rpx':'0', justifyContent:justifyContent}" class="uni-searchbar__box" @click="searchClick">
			<!-- #ifdef MP-ALIPAY -->
			<view class="uni-searchbar__box-icon-search">
				<uni-icons color="#999999" size="18" type="search" />
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-ALIPAY -->
			<text v-if="isShow" class="isShow"></text>
			<uni-icons v-else color="#999999" class="uni-searchbar__box-icon-search" size="18" type="search" />
			<!-- #endif -->
			<input v-if="show || isShow" :focus="focusStus" :disabled="disabled" :placeholder="placeholder" :maxlength="maxlength" class="uni-searchbar__box-search-input"
		confirm-type="search" type="text" :value="value" @input="$emit('input', $event.target.value)" @focus="$emit('focus', $event.target.value)" @blur="blur($event.target.value)"/>
			<text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
			
			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&value!=='')" class="uni-searchbar__box-icon-clear" @click="clear">
				<uni-icons color="#999999" class="" size="24" type="clear" />
			</view>
		
			<uni-icons @click="searchHand" class="icon_hand" v-if="isShow" color="#0091ff" fontweight="600;" size="22" type="search" />
		</view>
	</view>
</template>

<script>
import uniIcons from '../uni-icons/uni-icons.vue';
export default {
	name: 'UniSearchBar',
	components: {
		uniIcons
	},
	props: {
		zindex:{
			type:Number,
			default:1
		},
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		},
		radius: {
			type: [Number, String],
			default: 5
		},
		clearButton: {
			type: String,
			default: 'auto'
		},
		cancelButton: {
			type: String,
			default: 'auto'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		bgColor: {
			type: String,
			default: '#F8F8F8'
		},
		maxlength: {
			type: [Number, String],
			default: 100
		},
		disabled: {
			type: Boolean,
			default:false
		},
		value: {
			type: String,
		},
		// 报障页面需要的样式显示
		isShow:{
			type:Boolean,
			default:false
		},
		focusStus:{
			type:Boolean,
			default:true,
		},
		justifyContent:{
			type: String,
			default: 'center',
		}
	},
	data() {
		return {
			show: this.value ? true : false,
			focus: false
		};
	},
	watch:{
		value(val) {
			if (val) {
				this.show = true;
			}
		}
	},
	methods: {
		searchClick() {
			if (this.show) {
				return;
			}
			this.show = true;
			this.focus = true;
		},
		clear() {
			this.$emit('input', '');
			this.$emit('blurs', '',true);
			// eslint-disable-next-line
			this.$emit('searchHand', '',true);
			setTimeout(()=>{
				this.show = false;
			}, 0);
		},
		blur(val) { 
			this.$emit('blurs', val);
			this.focus = false;
			if (!this.value) this.show = false;
		},
		searchHand() {
			// this.$emit("searchHand",this.value)
		}
	}
};
</script>

<style lang="scss" scoped>
	$uni-searchbar-height: 36px;

	.uni-searchbar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		position: relative;
		padding: $uni-spacing-col-base;
		background-color: $uni-bg-color;
		z-index: 1;
		
	}

	.uni-searchbar__box {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		overflow: hidden;
		position: relative;
		flex: 1;
		justify-content: center;
		flex-direction: row;
		align-items: center;
		height: $uni-searchbar-height;
		padding: 5px 8px 5px 0px;
		border-width: 0.5px;
		border-style: solid;
		border-color: $uni-border-color;
	}

	.uni-searchbar__box-icon-search {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		width: 32px;
		justify-content: center;
		align-items: center;
		color: $uni-text-color-placeholder;
	}

	.uni-searchbar__box-search-input {
		flex: 1;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
	}

	.uni-searchbar__box-icon-clear {
		align-items: center;
		line-height: 24px;
		padding-left: 5px;
		padding-right: 15rpx;
	}

	.uni-searchbar__text-placeholder {
		font-size: $uni-font-size-base;
		color: $uni-text-color-placeholder;
		margin-left: 5px;
	}

	.uni-searchbar__cancel {
		padding-left: 10px;
		line-height: $uni-searchbar-height;
		font-size: 14px;
		color: $uni-text-color;
	}
	.isShow{
		margin: 0 10rpx 0 10rpx;
	}
	.icon_hand{
		margin:0 10rpx 0 20rpx;
	}
</style>
